<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <!--2 引入element ui css样式-->
  <!--2.1 引入element ui-->
  <link rel="stylesheet"
        href="public/element-ui/index.css">
  <style>
      .el-notification {white-space:pre-wrap !important; }

      html, body{
          margin: 0;
          padding: 0;
          height:100%;
          font-size: 14px;
          /* html默认高度只有一行, 需要显式声明高度*/
      }
      .login {
          width:100%;
          height: 100%;
          margin:0;
          padding: 0;
          background-image: url("public/custom/images/bg.jpg");
      }
      .loginCard {
          box-sizing: border-box;
          position: relative;
          top: 150px;
          width: 500px;
          margin: 0 auto;
          padding: 0 20px
      }
  </style>
</head>
<body>
<!--3 创建div容器,挂载vue实例-->
<div id="app" class="login">
  <!--登录框div的样式-->
  <el-card class="loginCard" shadow="always">
    <el-form :model="mymodel"
             :rules="myrule"
             ref="loginForm">
      <h2 style="text-align: center">校园运动会管理系统</h2>
      <el-form-item prop="userLoginId">
        <el-input
            type="text"
            v-model="mymodel.userLoginId"
            auto-complete="off"
            placeholder="登录账号">
        </el-input>
      </el-form-item>
      <el-form-item prop="currentPassword">
        <el-input
            type="password"
            v-model="mymodel.currentPassword"
            auto-complete="off"
            placeholder="登录密码">
        </el-input>
      </el-form-item>
      <el-form-item></el-form-item>
      <el-form-item>
        <el-button
            type="primary"
            @click="login('loginForm')"
            style="width: 100%">
          登 录
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button

                type="primary"
                style="width: 100%"
                @click="open1()"
                >
          测试账号
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</div>
<!--1 从本地引入js库 锁定版本-->
<!--1.1 引入vue-->
<script src="public/vue/vue.min.js"></script>
<!--1.2 引入element ui-->
<script src="public/element-ui/index.js"></script>
<!--1.3 引入 axios-->
<script src="public/axios/axios.min.js"></script>
<!--1.4 引入 自定义js包-->
<script src="public/mx-config.js"></script>
<script>
  //4 定义vue实例
  const app = new Vue({
    el: "#app",
    data:function()  {
      return{
        mymodel:{
          userId:'',
          userLoginId:'',
          currentPassword:'',
          userName:''
        },
        myrule:{
          userLoginId: [
            { required: true, message: '请输入登录账号', trigger: 'blur' },
          ],
          currentPassword: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
          ]
        }
      }
    },
    methods:{

      login:function (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //到后台验证用户
            axios.post('/login',this.mymodel).then(res =>{
              let loginInfo = res.data;
              if(loginInfo.loginStatus == '200') {
                //验证成功
                //创建一个本地会话，存放用户信息
                let userInfo = loginInfo.userInfo;
                sessionStorage.setItem("userInfo",JSON.stringify(userInfo));
                //如果是字符串，可以直接作为key-value设置
                sessionStorage.setItem("userName",userInfo.userName);
                sessionStorage.setItem("userId",userInfo.userId);
                //路由跳转:根据角色跳转到不同的入口
                if(userInfo.userType == '0'){
                  //后台管理控制台（系统管理员）：页面框架
                  window.location.href='adminindex.html';
                }else if(userInfo.userType == '1'){
                  //前台应用（学生用户）：页面框架
                  window.location.href='appindex.html';
                }else if(userInfo.userType == '2'){
                  //前台应用（裁判用户）：页面框架
                  window.location.href='refreeindex.html';
                }
              } else {
                //验证失败
                this.$message({
                  message:'登录账号或密码错误，请重新登录！',
                  type:'error'
                })
                return false;
              }
            })
          } else {
            this.$message({
              message:'登录账号和密码不能为空！',
              type:'error'
            })
            return false;
          }
        });
      },
      open1:function () {

        const h = this.$createElement;


        this.$notify({
          dangerouslyUseHTMLString: true,
          title: '测试账号',
          message: h('i',{style:'color:teal'},'管理员：admin/1;'+'\n'+'学生：zhangsan/1;'+'\n'+'裁判:wzy/1;')
        });
      }
    }
  })
</script>
</body>
</html>